<template>
  <div class="usesale">
    <v-chart :option="getOption()" autoresize></v-chart>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue'
import * as echarts from 'echarts'
const dataList = ref([
  {name: '公寓租赁', value: 59.33},
  {name: '车位租赁', value: 5.28},
  {name: '场地租赁', value: 10.97},
  {name: '仓库租赁', value: 2.6},
  {name: '房屋租赁', value: 7.28},
  // {name: '其他资产', value: 4.38},
])
const totalValue = computed(() =>
  dataList.value.reduce((sum, cur) => sum + cur.value, 0).toFixed(2)
)
const getOption = () => {
  return {
    color: [
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {offset: 0, color: '#65aaff'},
        {offset: 1, color: 'rgba(101, 170, 255, 0.5)'},
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {offset: 0, color: '#1ae6b4'},
        {offset: 1, color: 'rgba(26, 230, 180, 0.5)'},
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {offset: 0, color: '#00e4ff'},
        {offset: 1, color: 'rgba(0, 228, 255, 0.5)'},
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {offset: 0, color: '#fd6df6'},
        {offset: 1, color: 'rgba(227, 121, 216, 0.5)'},
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {offset: 0, color: '#ddeb18'},
        {offset: 1, color: 'rgba(215, 227, 121, 0.5)'},
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {offset: 0, color: '#ea7d1d'},
        {offset: 1, color: 'rgba(227, 170, 121, 0.5)'},
      ]),
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{b}  <br/>水吨耗: {c}  <br/>占比：({d}%)',
      textStyle: {
        color: '#fff',
      },
      extraCssText:
        'opacity: 0.8;background-color:#050F1B;padding:10px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;color:#fff',
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '5%',
      bottom: '6%',
      containLabel: true,
    },
    title: [
      {
        text: '业态类别  可出租面积(万m³)  占比',
        right: '3%',
        top: '16%',
        textStyle: {
          color: '#bdd3ed',
          fontSize: 18,
          fontWeight: '700',
        },
      },
      {
        text: '总计',
        left: '21%',
        top: '58%',
        textStyle: {
          color: '#bdd3ed',
          fontSize: 20,
          align: 'center',
        },
      },
      {
        text: totalValue.value,
        left: '24%',
        top: '42%',
        textAlign: 'center',
        textStyle: {
          color: '#bdd3ed',
          fontSize: 38,
          fontWeight: '700',
        },
      },
    ],
    legend: {
      icon: 'roundRect',
      z: 100,
      itemWidth: 20,
      itemHeight: 20,
      orient: 'vertical',
      top: '30%',
      right: '3%',
      itemGap: 15,
      textStyle: {
        rich: {
          name: {
            color: '#fff',
            fontSize: 16,
            align: 'left',
            width: 60,
            padding: [0, 0, 0, 10],
          },
          value: {
            color: '#bdd3ed',
            fontSize: 16,
            fontWeight: '700',
            align: 'right',
            width: 110,
            padding: [0, 0, 0, 10],
          },
          percent: {
            color: '#bdd3ed',
            fontSize: 16,
            fontWeight: '700',
            align: 'right',
            width: 40,
          },
        },
      },
      // 格式化图例的显示内容
      formatter: (name) => {
        console.log(name, 'ddd')

        if (name === '__header__') {
          return `{header|业态类别   可出租面积(万m³)   占比}`
        }
        const item = dataList.value.find((i) => i.name === name)
        const val = item?.value?.toFixed(2) || 0
        const percent = ((item?.value / totalValue.value) * 100).toFixed(1) + '%'
        return `{name|${name}}   {value|${val}}   {percent|${percent}}`
      },
      data: ['__header__', ...dataList.value.map((i) => i.name)],
    },
    series: [
      {
        name: '总计1',
        type: 'pie',
        center: ['25%', '55%'],
        radius: ['40%', '55%'],
        avoidLabelOverlap: true,
        animation: true,
        animationType: 'scale',
        animationDuration: 1000,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },

        emphasis: {
          label: {
            show: false,
          },
        },
        data: dataList.value,
      },
    ],
  }
}
</script>

<style lang="scss" scoped>
.usesale {
  margin-top: 5px;
  height: 90%;
  background-color: rgba(37, 62, 112, 0.5);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}
</style>
